import React, {PureComponent} from "react";
import {connect} from "react-redux";
import {Modal, notification} from "antd";
import {hideCreateOrderFee, updateOrderFee} from "./actions";
import FormEditor from "../../components/FormEditor";


class CreateOrderFeeModal extends PureComponent {

    handleCreate = () => {
        const formEditor = this.formEditor.props.form;
        if (formEditor) {
            const {dispatch, fees} = this.props;
            formEditor.validateFieldsAndScroll((err, values) => {
                if (!err) {
                    const feeList = fees || [];
                    const found = feeList.find(fee => fee.feeName === values.feeName);
                    if (found) {
                        notification.error({
                            message: '存在此科目的记录,请勿重复添加'
                        });
                    } else {
                        fees.push({...values, "id": Math.random().toString()});
                        dispatch(updateOrderFee(fees));
                        dispatch(hideCreateOrderFee());
                    }
                }
            });
        }
    };
    handleCancel = () => {
        const {dispatch} = this.props;
        dispatch(hideCreateOrderFee());
    };

    render() {
        const {loading, visible, model, feeList} = this.props;
        const schema = [
            {
                title: '基础信息',
                fields: [
                    {
                        field: 'feeName',
                        title: '费用科目',
                        type: 'listSelector',
                        controlProps: {
                            dataSource: feeList,
                            labelField: "name",
                            valueField: "name"
                        },
                        fieldOptions: {
                            rules: [{required: true, message: '请选择费用科目'}]
                        }
                    }, {
                        field: 'feeCount',
                        title: '金额',
                        type: 'number',
                        fieldOptions: {
                            rules: [{required: true, message: '请输入金额'}]
                        }
                    }
                ]
            }];

        return (
            <Modal
                title="新增一行费用"
                visible={visible}
                onOk={this.handleCreate}
                onCancel={this.handleCancel}
                confirmLoading={loading}
                okText="添加"
                cancelText="取消"
                width="60%"
            >
                <FormEditor
                    schema={schema}
                    column={3}
                    defaultReadonly={false}
                    showActionBar={false}
                    defaultValues={model}
                    wrappedComponentRef={inst => (this.formEditor = inst)}
                />
            </Modal>
        );
    }
}

const mapStateToProps = state => {
    return {
        ...state.ghOrderReceivable.createFee,
        feeList: state.ghOrderReceivable.list.feeList,
        fees: state.ghOrderReceivable.orderFee.fees
    };
};

export default connect(mapStateToProps)(CreateOrderFeeModal);
